<template>
  <div class="smallbox">
    <i class="iconfont icon-erweimajiaobiao" @click="cat"></i>
    <h1 class="animate__animated animate__flash">千锋管理系统</h1>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          type="text"
          v-model="ruleForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="captcha">
        <el-input v-model="ruleForm.captcha" type="text"></el-input>
        <span class="yan" v-loading="flag">
          <i v-html="captcha" @click="getCaptcha"></i>
        </span>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
      </el-form-item>
      <el-form-item>
        <i class="iconfont icon-iphone" style="color: #fff"></i
        ><a href="##javascript" class="Messages" @click="set"> 切换短信登陆</a>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 校验验证码
var validateCaptcha = (rule, value, callback) => {
  if (value) {
    callback();
  } else {
    callback("请输入验证码");
  }
};
// 校验用户名
var validateUsername = (rule, value, callback) => {
  // 3-16位字母数字下划线正则
  var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("3-16位字母数字下划线");
  }
};
// 校验密码
var validatePassword = (rule, value, callback) => {
  var Password = /^[a-zA-Z0-9_-]{3,16}$/;
  if (Password.test(value)) {
    callback();
  } else {
    callback("请输入密码");
  }
};
import * as api from "@/api/users";
import storage from '@/utils/storage';
export default {
  created() {
    this.getCaptcha();
  },
  data() {
    return {
      flag: false,
      name: "ewm",
      mesname: "mes",
      captcha: "", //验证码
      ruleForm: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 登入
          // 1、获取后台的验证码
          // 2进行本地校验
          // 3、本地校验通过=>先校验验证码
          // 4、验证码通过再校验用户名和密码
          // 5、成功和失败
          // 本地验证通过
          api.verifyCaptcha(this.ruleForm.captcha).then(async (res) => {
            if (res.data.state) {
              // 验证码通过校验用户名和密码
              let { username, password } = this.ruleForm;
              let res = await api.loginApi(username, password);
              if (res.data.state) {
                // 存储用户信息到本地
                // storage.storageUserInfo(res.data);
                this.storageUserInfo(res.data);
                // 跳转到主页
                this.$router.push("/");
              }
            } else {
              // 验证不通过刷新验证码
              this.getCaptcha();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    cat() {
      this.$emit("name", this.name);
    },
    set() {
      this.$emit("mesname", this.mesname);
    },
    getCaptcha() {
      this.flag = true;
      api.getCaptcha().then((res) => {
        this.captcha = res.data.img;
        this.flag = false;
      });
    },
     storageUserInfo({ userInfo, token, permission }) {
			// 将信息存到vuex
			this.$store.commit('users/SET_USEINFO', userInfo)
			storage.set('userInfo', userInfo)
			storage.set('qf-token', token)
			storage.set('permission', permission)
		},
  },
};
</script>
<style lang='less'scoped >
// 常规登陆页

.smallbox {
  .icon-erweimajiaobiao {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 80px;
    color: #b0b0b0;
  }
  h1 {
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
  }
  .el-form {
    .el-form-item {
      /deep/ .el-form-item__label {
        color: #fff;
      }
      /deep/ .el-form-item__content {
        .el-button {
          width: 236px;
          padding: 12px 20px;
          background: linear-gradient(to right, #1196fb, blue);
          height: 44px;
          width: 270px;
        }
        .el-input {
          width: 238px;
          height: 38px;
          .el-input__inner {
            height: 44px;
            width: 270px;
          }
        }
        .icon-iphone {
          margin-top: 6px;
          margin-left: 70px;
          font-size: 20px;
        }
        .Messages {
          font-size: 16px;
          color: #fff;
        }
      }
    }
    /deep/ .el-form-item:nth-of-type(3) {
      .el-form-item__content {
        position: relative;
        .yan {
          width: 150px;
          height: 44px;
          display: inline-block;
          background: #fff;
          border-left: none;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
          text-align: center;
          cursor: pointer;
          position: absolute;
        }
        .el-input {
          width: 120px;
          .el-input__inner {
            border-right: none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border: none;
            height: 44px;
            width: 120px;
          }
        }
      }
    }
  }
}
</style>
